<script>
  let { uihelpers, rawText = $bindable('')} = $props()
  import { sineIn } from 'svelte/easing'
  import { Drawer } from 'svelte-5-ui-lib'

  import CodeEditor from '$lib/components/EditorComponents/CodeEditor.svelte'
</script>

<Drawer
  drawerStatus={uihelpers.isOpen}
  closeDrawer={uihelpers.close}
  placement="right"
  params={{ x: 320, duration: 200, easing: sineIn }}
  class="shadow-[0_2px_8px_rgba(0,0,0,0.1)] p-0 rounded-tl-lg rounded-bl-lg z-300"
  width="half"
>
  <CodeEditor
    lang="json"
    containerDivClass="h-full rounded-tr-none rounded-br-none"
    bind:rawText
    {uihelpers}
  />
</Drawer>
